//引入gulp
const gulp = require('gulp'),
	  htmlmin = require('gulp-htmlmin'),
	  cleanCss = require('gulp-clean-css'),
	  uglify = require('gulp-uglify'),
	  babel = require('gulp-babel'),
	  del = require('del'),
	  connect = require('gulp-connect'),
	  autoprefixer = require('gulp-autoprefixer'),
	  sass = require('gulp-sass'),
	  { createProxyMiddleware } = require('http-proxy-middleware')
//集中管理所有路径
const paths = {
	html: {
		//	**/代表所有文件夹
		//	*/代表所有文件
		//	在src下面的所有html文件
		src: 'src/**/*.html',
		//目标文件dist
		dest: 'dist'
	},
	css: {
		src: 'src/css/**/*.scss',
		dest: 'dist/css'
	},
	js: {
		src: 'src/js/**',
		dest: 'dist/js'
	},
	img: {
		src: 'src/imgs/**',
		dest: 'dist/imgs'
	},
	libs: {
		src: 'src/libs/**',
		dest: 'dist/libs'
	},
	ico: {
		src: 'src/favicon.ico',
		dest: 'dist'
	}
}
//指定一个删除dist目录的任务
const delDist = () => del('dist')
//指定一个html任务：压缩html代码
const html = () => {
	//将结果返回出去
	//使用gulp里的src方法并将它返回出去（取文件）
	//pipe管道
	//使用gulp里的dest方法（目标位置）
	return gulp.src(paths.html.src)
		.pipe(htmlmin({
			removeComments: true, // 清除HTML注释
			collapseWhitespace: true, // 压缩HTML
			collapseBooleanAttributes: true, // 省略布尔属性的值 <input checked="true"/> ==> <input checked />
			removeEmptyAttributes: true, // 删除所有空格作属性值 <input id="" /> ==> <input />
			removeScriptTypeAttributes: false, // 删除<script>的type="text/javascript"
			removeStyleLinkTypeAttributes: true, // 删除<style>和<link>的type="text/css"
			minifyJS: true, // 压缩页面JS
			minifyCSS: true // 压缩页面CSS 
		}))
		//将压缩的文件放在dist里面
		.pipe(gulp.dest(paths.html.dest))
		//文件连接
		.pipe(connect.reload())
}
//指定css任务：压缩css代码
const css = () => {
	//使用gulp.src()获取
	return gulp.src(paths.css.src)
		.pipe(sass())
		.pipe(autoprefixer({
			presets: ['@babel/env']
		}))
		// .pipe(cleanCss())
		.pipe(gulp.dest(paths.css.dest))
		.pipe(connect.reload())
}
//指定js任务：压缩js代码并在压缩之前将es6转换成es5
const js = () => {
	return gulp.src(paths.js.src)
	  .pipe(babel({
		  presets: ['@babel/env']
	  }))
	  // .pipe(uglify())
	  .pipe(gulp.dest(paths.js.dest))
	  .pipe(connect.reload())
}
//img任务：把src里的图片全部移动到dist
const img = () => gulp.src(paths.img.src).pipe(gulp.dest(paths.img.dest))
//libs任务：把libi里的文件全部移动到dist
const libs = () => gulp.src(paths.libs.src).pipe(gulp.dest(paths.libs.dest))
//指定watch任务：监听代码改变，自动重启对应任务
const watch = () => {
	//监听文件：当文件改变的时候自动重启
	//在监听的任务后面加上.pipe（connect.reload（））
	// 例 ：gulp.watch(paths.html.src,html)  监听paths.html.src这个路径里面的HTML任务
	gulp.watch(paths.html.src,html)
	gulp.watch(paths.css.src,css)
	gulp.watch(paths.js.src,js)
}
//指定server任务：开启本地服务器
const server = () =>{
	//root 项目的根目录dist
	//port 配置端口 2-5位（一般2位或4位）
	//liverload 服务器支持热更新
	connect.server({
		root: 'dist',
		port: 2005,
		livereload: true,
		middleware () {
			return [
				createProxyMiddleware('/api',{
					target: 'https://apiv2.pinduoduo.com',
					changeOrigin: true
				})
			]
		}
	})
}
//ico任务：把ico图标移动到dist
const ico = () => gulp.src(paths.ico.src).pipe(gulp.dest(paths.ico.dest))

//最后把指定的任务导出
//default指默认任务
//series是同步执行代码，要先删除了dist才能启动其他任务
//parallel是异步执行代码，这些任务可以同时执行
module.exports.default = gulp.series(delDist,gulp.parallel(html,css,js,img,libs,watch,server,ico))